<template>
	<div class="contract-detail-page">

		<!-- 卡片：浅阴影 + 紧凑内边距 -->
		<el-card class="detail-card" shadow="always" :body-style="{ padding: '16px' }">
			<!-- 标题：字号、字重匹配 -->
			<h2 style="font-size: 18px; font-weight: 600; margin-bottom: 16px;">合同详情</h2>
			<ul class="info-list">
				<!-- 合同编号 -->
				<li>
					<span class="label">合同编号：</span>
					<span>{{ contractInfo.contractNo }}</span>
				</li>
				<!-- 合同名称 -->
				<li>
					<span class="label">合同名称：</span>
					<span>{{ contractInfo.contractName }}</span>
				</li>
				<!-- 老人姓名 -->
				<li>
					<span class="label">老人姓名：</span>
					<span>{{ contractInfo.elderName }}</span>
				</li>
				<!-- 老人身份证号 -->
				<li>
					<span class="label">老人身份证号：</span>
					<span>{{ contractInfo.elderIdCard }}</span>
				</li>
				<!-- 入住单号 -->
				<li>
					<span class="label">入住单号：</span>
					<span>{{ contractInfo.checkinNo }}</span>
				</li>
				<!-- 合同期限 -->
				<li>
					<span class="label">合同期限：</span>
					<span>{{ parseTime(contractInfo.startTime) }} —— {{ parseTime(contractInfo.endTime) }}</span>
				</li>
				<!-- 合同状态（小标签） -->
				<li>
					<span class="label">合同状态：</span>
					<el-tag :type="statusTagType" effect="plain" size="small">
						{{ statusText }}
					</el-tag>
				</li>
				<!-- 签约日期（仅日期，无时间） -->
				<li>
					<span class="label">签约日期：</span>
					<span>{{ parseTime(contractInfo.signDate, '{y}-{m}-{d}') }}</span>
				</li>
				<!-- 丙方姓名（有数据才显示） -->
				<li v-if="contractInfo.partyCName">
					<span class="label">丙方姓名：</span>
					<span>{{ contractInfo.partyCName }}</span>
				</li>
				<!-- 丙方联系方式（有数据才显示） -->
				<li v-if="contractInfo.partyCPhone">
					<span class="label">丙方联系方式：</span>
					<span>{{ contractInfo.partyCPhone }}</span>
				</li>
				<!-- 合同文件（文字链接） -->
				<li>
					<span class="label">合同文件：</span>
					<span v-if="contractInfo.agreementUrl">
						{{ contractInfo.agreementUrl.split('/').pop() }}
						<a href="javascript:;" class="view-link" @click="viewFile(contractInfo.agreementUrl)">查看</a>
					</span>
					<span v-else>无</span>
				</li>
			</ul>
		</el-card>

		<!-- 条件渲染：仅合同“已解除”时展示解除记录 -->
		<el-card v-if="contractInfo.status === '3'" class="detail-card" shadow="always"
			:body-style="{ padding: '16px' }">
			<h2 style="font-size: 18px; font-weight: 600; margin-bottom: 16px;">解除记录</h2>
			<ul class="info-list">
				<li>
					<span class="label">提交人：</span>
					<span>{{ contractInfo.terminateBy }}</span>
				</li>
				<li>
					<span class="label">解除日期：</span>
					<span>{{ parseTime(contractInfo.terminateDate, '{y}-{m}-{d}') }}</span>
				</li>
				<li>
					<span class="label">合同文件：</span>
					<span v-if="contractInfo.terminateAgreementUrl">
						{{ contractInfo.terminateAgreementUrl.split('/').pop() }}
						<a href="javascript:;" class="view-link" @click="viewFile(contractInfo.terminateAgreementUrl)">查看</a>
					</span>
					<span v-else>无</span>
				</li>
			</ul>
		</el-card>

		<!-- 返回按钮：常规尺寸 -->
		<div class="bottom-btn-wrapper">
		    <el-button type="primary" @click="goBackToContractTrace">返回</el-button>
		</div>
	</div>
</template>

<script setup>
	import { getContract } from "@/api/residing/contract"
	import { ref,onMounted,computed } from 'vue'
	import { useRoute } from 'vue-router'
	
	const router = useRouter();
	const route = useRoute()
	const contractInfo = ref({}) // 存储合同详情数据

	// 根据状态动态生成标签类型（info/success/warning/danger）
	const statusTagType = computed(() => {
		const status = contractInfo.value.status
		const typeMap = {
			0: 'info', // 未生效
			1: 'success', // 生效中
			2: 'warning', // 已过期
			3: 'danger' // 已失效
		}
		return typeMap[status] || 'info'
	})

	// 根据状态生成显示文本
	const statusText = computed(() => {
		const status = contractInfo.value.status
		const textMap = {
			0: '未生效',
			1: '生效中',
			2: '已过期',
			3: '已失效'
		}
		return textMap[status] || '未知状态'
	})
	
	// 查看文件（示例：新窗口打开）
	const viewFile = (url) => {
	  window.open(url, '_blank');
	};
	
	// 跳转回“合同追踪”页面
	const goBackToContractTrace = () => {
	  router.push({ name: 'ContractList' });
	};

	// 页面加载时获取合同详情
	onMounted(() => {
		const contractId = route.params.id // 获取路由参数中的合同ID
		getContract(contractId).then(response => {
			contractInfo.value = response.data
			console.log(contractInfo.value)
		})
	})
	
	
</script>

<style scoped>
	.contract-detail-page {
		padding: 16px;
	}

	.detail-card {
		border: 1px solid #ebeef5;
		/* 卡片边框，匹配图一风格 */
		border-radius: 4px;
		/* 卡片圆角 */
		margin-bottom: 4px;
	}

	.info-list {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.info-list li {
		margin-bottom: 12px;
		/* 列表项底部间距 */
		line-height: 1.6;
		/* 行高，保证文字垂直居中 */
		align-items: center;
		/* 文字垂直居中 */
	}

	.info-list .label {
		display: inline-block;
		width: 120px;
		/* 固定标签宽度（需覆盖“老人身份证号”的长度） */
		color: #606266;
		/* 标签文字颜色 */
		font-size: 14px;
		/* 标签文字大小 */
		text-align: right;
		/* 标签文字右对齐 */
		margin-right: 12px;
		/* 标签与内容的间距 */
	}

	.info-list span:not(.label) {
		font-size: 14px;
		/* 内容文字大小 */
		flex: 1;
		/* 内容区自动填充剩余宽度 */
	}

	.view-link {
		color: #409eff;
		/* 查看链接的蓝色 */
		cursor: pointer;
		/* 鼠标悬浮为手型 */
		margin-left: 4px;
		/* 与文件名的间距 */
	}

	.back-btn {
		font-size: 14px;
		/* 返回按钮文字大小 */
	}
	.bottom-btn-wrapper {
	  text-align: center;
	  margin-top: 30px; /* 与上方内容拉开间距 */
	  margin-bottom: 20px;
	}
</style>